<template>
	<!-- 登录 -->
	<view class="app">
		<view class="login-title">
			<image :src="loginTop" mode="aspectFit"></image>
		</view>
		<view class="form">
			<u-form :model="form" ref="uForm" label-align="left" :label-style="labelStyle" :error-type="errorType"
				label-width=0>
				<view class="form-section">
					<u-form-item prop="username" label=" ">
						<view class="row">
							<u-icon class="icon" name="account" color="#ddd" size="24px"></u-icon>
							<u-input v-model="form.username" maxlength="30" type="text" confirmType="next" :custom-style="styles2"
								placeholder="用户名" :placeholderStyle="placeholderStyle" trim
								:disabled="disabledInput" />
						</view>
					</u-form-item>
					<u-form-item prop="pwd" label=" ">
						<view class="row">
							<u-icon class="icon" name="lock" color="#ddd" size="24px"></u-icon>
							<u-input v-model="form.pwd" maxlength="30" type="text" confirmType="next" :custom-style="styles2"
								placeholder="登录密码" :placeholderStyle="placeholderStyle" trim
								:disabled="disabledInput" />
						</view>
					</u-form-item>
				</view>
			</u-form>
		</view>
		
		<view class="btn-bar">
			<u-button type="success" @click="submit" :disabled="disabled"
				:loading="loading">
				登录系统
			</u-button>
		</view>
		<view class="btn-bar">
			<view class="forget">
				<text @click="forget">忘记密码？</text>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/app.config.js";
	import User from '@/domain/base/User.js'

	export default {
		data() {
			// 表单数据
			let form = {
				username: '', // 密码
				pwd: '', // 密码
			};
			// 页面数据变量
			return {
				gapHeight: this.$css.gapHeight,
				gapColor: this.$css.gapColor,
				disabledInput: false,

				formCss: this.$css.form,
				tabbarCss: this.$css.tabbar,

				disabled: false,
				loading: false,
				
				loginTop: this.$resource.loginTop,

				// 表单数据
				form,
				rules: {
					"username": [{
						required: true,
						message: '请输入用户名',
						trigger: ['change', 'blur'],
					}, {
						min: 3,
						message: '用户名不能少于3个字符',
						trigger: ['change', 'blur']
					}],
					"pwd": [{
						required: true,
						message: '请输入密码',
						trigger: ['change', 'blur'],
					}, {
						min: 6,
						message: '密码不能少于6个字符',
						trigger: ['change', 'blur']
					}]
				},

				// 表单相关样式
				placeholderStyle: this.$css.placeholderStyle,
				styles: this.$css.styles,
				styles2: this.$css.styles2,
				errorType: this.$css.errorType,
				labelStyle: this.$css.labelStyle,
			}
		},
		onLoad(options) {
			this.initPage(options);
		},
		onReady() {
			if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			initPage(options = {}) {
				// console.log(this.loginTop)
			},
			submit() {
				if(config.debug) console.log('页面表单', this.form)

				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.login();
					}
				})
			},
			// 登录
			login() {
				this.disabled = true;
				this.loading = true;
				
				let url = this.$api.Login;
				let data = User.newApiDataForLogin(this.form);
				
				if(config.debug) console.log('登录参数', url, data)
				
				this.$util.request(url, data)
				.then(res => {
					if(config.debug) console.log('登录res', res)
					if(res.code == 1){
						if(res.rows.length == 1){
							vk.toast('登录成功', 'success', () => {
								this.loginSuccess(User.newForm(res.rows[0]));
							})
							return
						}
					}
					
					this.disabled = false;
					this.loading = false;
					vk.alert(res.message || '请核对账号和密码！', '登录失败');
					return
				})
			},
			// 登录成功后的处理
			loginSuccess(loginUser) {
				// 写入vuex持久化
				vk.setVuex('$user.userInfo', loginUser);
				
				// 跳转到首页,或页面返回
				var pages = getCurrentPages();
				// console.log(pages.length,pages[pages.length-1].route);
				if(pages.length > 1
					&& pages[pages.length-2]
					&& pages[pages.length-2].route
					&& pages[pages.length-2].route.indexOf('login/login') == -1
				){
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('loginSuccess', {});
					vk.navigateBack();
				}else{
					// 进入首页
					vk.navigateToHome();
				}
			},
			forget(){
				vk.toast('点击了忘记密码');
			}
		}
	}
</script>
<style scoped lang="scss">
	.app{
		height: 100vh;
		background-color: #fff;
	}
	.form{
		padding: 0 20rpx 24rpx;
	}
	.login-title{
		width: 100%;
	}
	.login-title image{
		width: 100%;
	}
	.icon{
		margin-right: 50rpx;
	}
	.btn-bar{
		margin: auto;
		width: 90%;
	}
	.forget{
		margin: auto;
		padding: 40rpx;
		text-align: center;
	}
	.forget text{
		padding: 20rpx;
		text-align: center;
	}
</style>